<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/admin/banner-list' }">轮播图管理</el-breadcrumb-item>
    <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
  <el-table
            :data="bannerArr"
            style="width: 100%">
    <!--type=index 设置这一列显示的内容为编号-->
    <el-table-column type="index" label="编号" width="100px" align="center"></el-table-column>
    <el-table-column
        label="轮播图"
        align="center">
      <template slot-scope="scope">
        <!--scope.row代表当前行对应数组中的对象-->
        <img :src="scope.row.url" width="100%">
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="200px">
      <!--scope里面装着当前行所对应的对象信息
      scope.$index 得到当前行对应的对象在数组中的下标
      scope.row 得到当前行对应的对象
      -->
      <template slot-scope="scope">
        <el-button  size="mini" @click=""
                    type="success" style="margin-right: 20px">修改</el-button>
        <el-popconfirm
            title="您确定删除此轮播图吗?"
            @confirm="del(scope.row)"
        >
          <el-button slot="reference"  size="mini"
                     type="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "BannerList",
  data(){
    return{
      bannerArr:[{url:require("@/assets/imgs/101.jpg")},{url:require("@/assets/imgs/102.jpg")}],
    }
  },
  methods:{
    del(banner){
      let url="http://localhost:8080/banners/"+banner.id+"/delete"
      console.log(url);
      axios.post(url).then((response)=>{
        let responseBody=response.data;
        if (responseBody.state==20000){
          this.$message({
            message:"删除成功",
            type:'success'
          })
          this.bannerArr.splice(banner.id,1);
        }else {
          this.$message.error(responseBody.message);
        }
      })
    },
    loadBannerList(){
      let url= "http://localhost:8080/banners";
      console.log(url)
      axios.get(url).then((response)=>{
        let responseBody=response.data;
        this.bannerArr=responseBody.data;
        console.log(this.bannerArr);
      })
    }
  },
  mounted() {
    this.loadBannerList();
  }
}
</script>

<style scoped>

</style>